<template>
  <div class="cb-main-container">
    <div class="search-box">
      <el-form :model="searchFormConfig.model" ref="searchFormRef" inline>
        <el-form-item label="名称" prop="name">
          <el-input v-model="searchFormConfig.model.name" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="searchFormConfig.model.status" placeholder="请选择状态" style="width: 168px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="refresh" @click="onReset">重置</el-button>
          <el-button icon="search" type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <div class="operation-box">
        <el-button icon="plus" type="primary" @click="add">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableConfig.data" size="large" :empty-text="tableConfig.emptyText">
          <el-table-column type="index" width="50" />
          <el-table-column property="name" label="名称"/>
          <el-table-column property="shortName" label="图片">
            <template #default="scope">
              <el-image :src="scope.row.icon" style="width: 80px; height: 42px" />
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="(scope.row.status === 1) ? 'primary' : 'info'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template #default="scope">
              <el-button link type="primary" icon="edit" @click="onEdit(scope.row)">编辑</el-button>
              <el-button link type="danger" icon="delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination background layout="prev, pager, next" :total="searchFormConfig.model.total" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>

  <!-- 添加/编辑 -->
  <el-dialog v-model="dialogConfig.visible" :title="dialogConfig.title" :width="dialogConfig.width" @close="dialogCloseHandle" :close-on-click-modal="false">
    <el-form ref="formRef" :model="formConfig.model" label-width="86px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formConfig.model.name" autocomplete="off" maxlength="16" placeholder="请填入品牌名称" />
      </el-form-item>
      <el-form-item label="图片" prop="icon">
        <el-upload
            action=""
            name="file"
            :show-file-list="false"
            :accept="formConfig.acceptTypes"
            :before-upload="beforeUploadFile"
            :http-request="uploadFile">
          <div class="upload-image-box">
            <el-image :src="formConfig.model.icon">
              <template #error>
                <div class="image-slot">
                  <el-icon color="#606266"><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="status">
          <el-select v-model="formConfig.model.status" placeholder="请选择状态" style="width: 168px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onDialogCancel">取消</el-button>
        <el-button type="primary" @click="onDialogConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue"
import { ElMessage } from "element-plus"
import { Picture } from '@element-plus/icons-vue'
import { brandUploadFile, brandPageList, brandAdd, brandEdit } from '@/api/erp/product.js'
import { clear } from '@/util/ObjectUtil.js'

defineOptions({
  name: '/erp/productManagement/brand'
})

const searchFormRef = ref(null)
const searchFormConfig = reactive({
  model: {
    name: '',
    status: '',
    pageNum: 1,
    pageSize: 10,
    total: 0,
  }
})

const formRef = ref(null)
const formConfig = reactive({
  model: {
    id: '',
    name: '',
    icon: '',
    status: 1
  },
  acceptTypes: "image/*"
})

const tableConfig = reactive({
  data: [
    {id: 1, name: '测试产品', icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', status: 1},
    {id: 2, name: '测试产品11', icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', status: 0}
  ],
  emptyText: '暂无数据'
})

const dialogConfig = reactive({
  visible: false,
  title: '新增',
  width: 500
})

const statusEnum = [
  {label: '全部', value: -1},
  {label: '禁用', value: 0},
  {label: '启用', value: 1}
]

// 新增
const add = () => {
  dialogConfig.visible = true
}

// 分页
const handleCurrentChange =(pageNum) => {
  searchFormConfig.model.pageNum = pageNum
  requestBrandPageList()
}

// 编辑
const onEdit = (rowData) => {
  formConfig.model = {...rowData}
  dialogConfig.visible = true
}

const onDialogCancel = () => {
  dialogConfig.visible = false
}

// 提交
const onDialogConfirm = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    if (formConfig.model.id) {
      await brandEdit(formConfig.model)
    } else {
      await brandAdd(formConfig.model)
    }
    await requestBrandPageList()
    dialogConfig.visible = false
  }
}
const dialogCloseHandle = () => {
  if (!formRef.value) return
  formRef.value.resetFields()

  clear(formConfig.model)
}

const beforeUploadFile = (file) => {
  const fileSize = file.size / 1024 / 1024 < 5
  if (fileSize > 1) {
    ElMessage.error('上传头像图片大小不能超过 5MB!')
    return false
  }
  return true
}

const uploadFile = (uploadRequestOptions) => {
  brandUploadFile(uploadRequestOptions.file).then(resp => {
    formConfig.model.icon = resp.data.path
  })
}

const requestBrandPageList = () => {
  brandPageList(searchFormConfig.model).then(resp => {
    tableConfig.data = resp.data.data
    searchFormConfig.model.total = Number.parseInt(resp.data.total)
  })
}

const onReset = () => {
  searchFormRef.value.resetFields()
  searchFormConfig.model.pageNum = 1
  requestBrandPageList()
}

const onSearch = () => {
  searchFormConfig.model.pageNum = 1
  requestBrandPageList()
}

onMounted(() => {
  requestBrandPageList()
})
</script>

<style scoped lang="scss">
.cb-main-container {
  display: flex;
  flex-direction: column;

  .search-box {
    @include containerStyle;
    padding-bottom: 0;
  }

  .main-content {
    flex: 2;
    @include containerStyle;

    display: flex;
    flex-direction: column;

    .table-box {
      flex: 2;
      margin-bottom: $cb_margin-value;
    }
  }
}

.upload-image-box {
  .el-image {
    padding: 0 5px;
    width: 168px;
    height: 168px;
    background-color: $cb-fill-color-light;

    .image-slot {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        font-size: 30px;

        &:active, &:focus {
          color: inherit !important;
          outline: none;
        }
      }
    }
  }
}
</style>
